<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="../../static/acg/css/map.css"/>
    <style>


    </style>
    <title>命运之城</title>
</head>

<body>
{if condition="$error_msg!=''"}
{$error_msg}
{else /}
<!--地图-->
<div id="container"></div>
<!--蒙层-->
<div class="shade_container"></div>
<!-- 顶部信息条 -->
<div class="top" id="top">
    <!-- 顶部背景 -->
    <div class="top_bg"></div>
    <!-- 左侧用户描述 -->`
    <div id="top_user_btn" class="top-left-container">
        <!-- 内容 -->
        <span id="top_user_name">{$name}</span>的幸运之城&nbsp;&nbsp;&nbsp;
        <!-- 箭头 -->
        <span id="arrow" class="arrow_down"></span>
    </div>
    <!-- 右侧 注释部分 -->
    <div class="info-btn">
        <!-- 右侧分割线 -->
        <div class="top_line"></div>
        <!-- 注释图标 -->
        <img src="../../static/acg/img/map_info.png" alt="">
        <!-- 注释文字 -->
        <a href="javascript:;" id="info_btn">注释</a>
    </div>
</div>

<!-- 用户详情 -->
<div id="user_detail" class="user_detail_class">本图根据出生数据生成，展示了中国境内大城市对<span id="user_detail_name">{$name}</span>的影响
</div>
<!-- 命运之城或者线详情 -->
<div id="info_detail" class="info_detail_class">
    {foreach $data1['fate_city_default'] as $k => $v}
    <p>
    <div class="map_con"><img src={$v.icon}>{$v.name}</div>
    <p class="map_des">{$v.des}</p>
    </p>
    {/foreach}
</div>

<!-- 底部详情框 -->
<div id="card" class="bottom-card card_normal" style='width:90%;'>
    <!-- 城市的名字 -->
    <label id="current_city_name" style='color:#333333;font-size:18px;font-weight: bold;'></label>
    <!-- ***之城 -->
    <label id="current_fate_city_name" style='color:#333333;font-size:14px;'></label>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 财富、桃花、学业 -->
    <div class="row-container">
        <label class="row-item" style="text-align: left;"><span id="score_name_0" class="row-item-name"> </span><span
                id="score_value_0" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: center;"><span id="score_name_1"
                                                                  class="row-item-name"> </span><span
                id="score_value_1" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: right;"><span id="score_name_2"
                                                                 class="row-item-name"> </span><span
                id="score_value_2" class="row-item-value"> </span></label>
    </div>
    <!-- 事业、幸运、健康 -->
    <div class="row-container">
        <label class="row-item" style="text-align: left;"><span id="score_name_3" class="row-item-name"> </span><span
                id="score_value_3" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: center;"><span id="score_name_4"
                                                                  class="row-item-name"> </span><span
                id="score_value_4" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: right;"><span id="score_name_5"
                                                                 class="row-item-name"> </span><span
                id="score_value_5" class="row-item-value"> </span></label>
    </div>
</div>

<!-- 底部下载条 -->
<div class="bottom" id="bottom">
    <div class="bottom_bg"></div>
    <div class="bo-left" id="close">x</div>
    <div class="bo-logo">
        <img src="/uploads/20180329/33503860a02a86f4c23d59ac75ec5b59.jpg" alt="">
    </div>
    <div class="bo-des">查看我的专属地图</div>
    <div class="bo-btn">
        <a href="javascript:;" id="btn">打开APP</a>
    </div>
</div>

<script src="/static/jquery-3.1.1.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=2990b0fec0fe543434c2692ce3369db4&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder"></script>
<!--<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
<script type="text/javascript">

    //隐藏 蒙层
    $(".shade_container").hide();

    //是否显示所有的命运之城
    var is_show_all_city = 1;

    //数据
    var data = {$data};
    var fcid = {$fcid};

    //当前的城市名字
    var current_city_name = '';
    //当前的命运之城的名字
    var current_fate_city_name = data.fate_city[fcid].name;

    // console.log(data);
    // console.log('fcid=' + fcid + ',current_fate_city_name=' + current_fate_city_name + ',data[fcid].score_list[0].name=' + data.fate_city[fcid].score_list[3].name + ',name=' + name);

    //******设置元素显示值********
    var current_item = data[fcid];
    //******设置元素显示值********

    var map = new AMap.Map('container', {
        resizeEnable: true,
        // center: [116.397428, 39.90923], // 不设置 自动定位
        zoom: {$zoom},
        // lang: 'zh_en'
    });
    // map.addControl(new AMap.ToolBar());
    // map.addControl(new AMap.Scale());
    map.on('complete', function () {
        // 地图图块加载完成后触发
        // console.log('map complete');

    });


    //创建信息窗体
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: '',
        offset: new AMap.Pixel(-5, -35)
    });
    //循环添加 命运之城 标记
    data.fate_city.forEach(function (marker, index) {
        // console.log('index=' + index);
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(18, 25),
            // 图标的取图地址
            image: marker.loc_icon,
            // 图标所用图片大小
            imageSize: new AMap.Size(18, 25),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
        });

        //创建标记，并添加到 map
        var markerInMap = new AMap.Marker({
            map: map,
            icon: startIcon,
            position: [marker.longitude, marker.latitude],
            offset: new AMap.Pixel(-9, -25),
            extData: index
        });


        //点击事件
        var onMarkerClick = function (e) {
            //赋值当前被选中的城市id
            fcid = e.target.getExtData();
            // console.log('onMarkerClick fcid=' + fcid);
            showSelectedCityAndDistrict();
        }
        markerInMap.on('click', onMarkerClick);//绑定click事件

        //展示传进来的fcid的信息窗体
        if (fcid == index) {
            showSelectedCityAndDistrict();
            // console.log('显示 fcid=' + fcid + '的弹出框' + ',marker.id=' + marker.id);
        } else {
            // console.log('marker.id=' + marker.id + ' 不显示');
        }
    });

    //自适应显示多个命运之城的标记
    map.setFitView();

    // 显示当前选中的命运之城和行政区域
    function showSelectedCityAndDistrict() {
        infoWindow.setContent('<div class=\"pop\"><img class=\"pop-icon\" src=\"' + data.fate_city[fcid].icon + '\"/>' + data.fate_city[fcid].name + ' </div></div>');
        infoWindow.open(map, [data.fate_city[fcid].longitude, data.fate_city[fcid].latitude]);
        //把经纬度转换为地址，只需要城市即可
        regeoCode(data.fate_city[fcid].longitude, data.fate_city[fcid].latitude);
    }

    //已经画的行政区域，全局保存，便于删除
    var polygons = [];

    function drawBounds(city_name) {
        // console.log('drawBounds 开始画\"' + city_name + '\"' + '城市的行政区域');
        var district;
        //加载行政区划插件
        if (!district) {
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0,   //获取边界不需要返回下级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'city'  //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        district.setLevel('city')
        district.search(city_name, function (status, result) {
            map.remove(polygons)//清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: '#80d8ff',
                        strokeColor: '#0091ea'
                    });
                    polygons.push(polygon);
                }
            }
            map.add(polygons);
            if (!is_show_all_city) {
                map.setFitView(polygons);//视口自适应
            }
        });
    }

    // 传入经纬度定位城市名字
    function regeoCode(lon, lat) {
        // console.log('regeoCode 传入经纬度定位城市名字');
        var geocoder;
        if (!geocoder) {
            geocoder = new AMap.Geocoder({
                city: "010", //城市设为北京，默认：“全国”
                radius: 1000 //范围，默认：500
            });
        }
        var lnglat = [lon, lat];
        geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.regeocode) {
                var address = result.regeocode.formattedAddress;
                var city = result.regeocode.addressComponent.city;
                if (isEmpty(city)) {
                    city = result.regeocode.addressComponent.province;
                }
                // console.log(result.regeocode.addressComponent.province);
                // console.log(lon + ',' + lat + ' 所在位置 ：' + result.regeocode.addressComponent.province + ' ' + result.regeocode.addressComponent.city);
                //画城市区域
                drawBounds(city);
                current_city_name = city;
                //设置值
                document.getElementById('current_city_name').innerText = current_city_name;
                setBottomDetail(data.score_list[fcid]);
            } else {
                alert(JSON.stringify(result))
            }
        });
    }

    //设置底部内容
    function setBottomDetail(item) {
        // console.log('setBottomDetail 显示底部内容 fcid=' + fcid + ',item.id=' + item.id + ',item.name=' + item.name);
        //设置 当前的命运之城 的名字
        document.getElementById('current_fate_city_name').innerText = data.fate_city[fcid].name;
        //设置 得分列表
        for (var i = 0; i < 6; i++) {
            document.getElementById('score_name_' + i).innerText = item[i].name;
            document.getElementById('score_value_' + i).innerText = item[i].percent;
            document.getElementById('score_value_' + i).style.cssText = "color:" + item[i].color + ";";
        }
    }


    //判断字符是否为空的方法
    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }

    //*****top部分********
    //左侧顶部 是否展示收起，默认收起
    var isShowUserHint = 0;
    var isShowInfoHint = 0;
    var arrow = document.getElementById('arrow');
    // 顶部弹出、收起动画
    $(document).ready(function () {
        //顶部 左侧点击事件
        $(".top-left-container").click(function () {
            $(".info_detail_class").hide();
            $(".user_detail_class").slideToggle();
            arrowUpOrDown();

            if(isShowUserHint){
                $(".shade_container").show();
            }else{
                $(".shade_container").hide();
            }

            if (isShowInfoHint){
                isShowInfoHint=!isShowInfoHint;
            }
            // console.log('top-left-container is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });
        // 顶部 右侧点击事件
        $(".info-btn").click(function () {
            if (isShowUserHint) {
                $(".user_detail_class").hide();
                arrowUpOrDown();
            }
            isShowInfoHint=!isShowInfoHint;

            $(".info_detail_class").slideToggle();
            if(isShowInfoHint){
                $(".shade_container").show();
            }else{
                $(".shade_container").hide();
            }
            // console.log('info-btn is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });
        // 蒙层点击事件
        $(".shade_container").click(function () {
            if (isShowUserHint) {
                $(".user_detail_class").slideToggle();
                arrowUpOrDown();
            }
            if (isShowInfoHint) {
                $(".info_detail_class").slideToggle();
                isShowInfoHint=0;
            }
            $(".shade_container").hide();
            // console.log('shade_container is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });

    });

    function arrowUpOrDown() {
        isShowUserHint = !isShowUserHint;
        if (isShowUserHint) {
            arrow.className = 'arrow_down arrow_up';
        } else {
            arrow.className = 'arrow_down';
        }
    }

    //*****top部分********

    //*****下载条部分********
    var download_url = 'http://www.goddessxzns.com';
    // var btn = document.getElementById('btn');
    // 底部下载按钮 点击事件
    // btn.onclick = function () {
    //     // console.log('download_url is clicked!');
    //     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    //         // alert('Iphone')
    //         var loadDateTime = new Date();
    //         window.setTimeout(function () {
    //                 var timeOutDateTime = new Date();
    //                 if (timeOutDateTime - loadDateTime < 5000) {
    //                     window.location = download_url;
    //                 } else {
    //                     window.close();
    //                 }
    //             },
    //             25);
    //         window.location = "iOSXZNSGoddessZhunle://";
    //     } else if (navigator.userAgent.match(/android/i)) {
    //         window.location = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.constellation.goddess';
    //     } else {
    //         window.location = download_url;
    //     }
    // };
    // new Mlink({
    //     mlink:'https://axelkv.mlinks.cc/ABPB',//跳转至地图首页
    //     button:document.querySelector('a#btn')
    // });
    // new JMLink({
    //     jmlink: 'https://a0ue2y.jmlk.co/AA63',// 短链地址
    //     button: document.querySelector('a#btn'),
    //     plhparams: {
    //         target: 'local',
    //         link: 'acg_map?need_auth=1'
    //     }
    // });
    document.querySelector('a#btn').addEventListener('click',function(e){
        window.location = 'https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link='+encodeURIComponent('acg_map?need_auth=1');
    })
    // 底部关闭按钮 点击事件
    var close_btn = document.getElementById('close');
    close_btn.onclick = function () {
        // 隐藏下载条
        document.getElementById('bottom').style.display = 'none';
        // 设置描述部分的class
        var card = document.getElementById('card');
        card.className = 'bottom-card card_remove_download'
    }
    //*****下载条部分********

</script>
{/if}

{include file="../apps/web/view/public/sensors.html" /}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d09c76e42b7d952920cd58fc4c715cf0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>

</html>
